<div class="tab-pane tab-pane-global fade active show" id="tab--polling-{{log_id}}-{{node_id}}" style="text-align:center">
    {% if error %}
      <p>{{ error }}</p>
    {% else %}

    <div class="container">
    <div class=" pl-1 pt-2 pb-2" >
	    <span class=""> Polling Data  &lt; <i>{{ node_name }}</i> &gt; </span>
    </div>
    </div>

<table id="table--polling-{{node_id}}" class="table" data-log-id="{{ log_id }}" data-node-id="{{node_id}}">
</table>

<script>
var log_id = "{{ log_id }}"
var node_id = "{{ node_id }}"
var table_selector = "#table--polling-{{node_id}}"
// console.log(node_id)
$.get("/check_node_data_ready/"+log_id+"/"+node_id, 
      // get columns
      function(data){
        // remove blank column
        colsname=data.colsname.split(";").filter(value => value !=="")
        var colsArray = []
        // remap column name with column title
        colsname.forEach(
          function(item, index){
            // console.log(item, index);
            var title = item;
            var field = "";
            if (index==0){
             field = "time";
            } else {
             field = "c"+index;
            }
            colsArray.push(
             {
                "title": title, 
                "field": field,
             }
            )
          }
        )

        // fetch table data
        // console.log(colsArray);
        $.get("/fetch_polling_detail_data/"+log_id+"/"+node_id, 
              function(data){
                // console.log(data)
                var table = new Tabulator(table_selector, {
                  layout:"fitColumns",
                  height:"100%",
                  cellVertAlign:"middle", 
                  columns:colsArray,
               })

	        if (data["error"] == 0){
                    tableData = data["data"];
                    table.setData(tableData)
	        }
	      }
        )
      }
)
</script>

  {% endif %}
</div>
